<template>
    <div>
        <Row>
            <i-col span='8'>
                <div id="main" style="width:600px;height:400px;"></div>
                
            </i-col>
            <i-col span='8'>
                <div id="main1" style="width:600px;height:400px;"></div>
            </i-col>
            <!-- <i-col span='12'>
                <div id="main2" style="width:800px;height:400px;"></div>
            </i-col> -->
        </Row>
        <Row>
            <i-col span='8'>
                <div id="main2" style="width:800px;height:400px;"></div>
            </i-col>
            <i-col span='4'>
                <div id="main3" style="width:800px;height:400px;"></div>
            </i-col>
        </Row>

    </div>
</template>
<script>

import echarts from 'echarts'
import {  } from  '@/api'


export default {
    data() {
        return {
            myChart3:null,
            option3: null,
        }
    },
    methods: {

        refresh() {
            let myChart = echarts.init(document.getElementById('main')) 
            let option = {
                title: {
                    text: 'Echarts 入门示例'
                },
                tooltip: {},

                legend: {
                    data: ['销量']
                },
                grid:{
                    left: '5%',
                    right: '4%',
                },
                xAxis:{
                    data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
                },
                yAxis:{},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5,20,40,80,50,60]
                },{
                    type: 'pie',
                    center: ['65%',60],
                    radius:35,
                    data:[
                        {name:'XX',value:52},
                        {name:'YY',value:54},
                        {name:'ZZ',value:42}
                    ]
                }]       
            } 
            myChart.setOption(option);


            let myChart1 = echarts.init(document.getElementById('main1')) 
            let option1 = {
                xAxis:{
                    type: 'category'
                },
                yAxis:{},
                dataset:{
                    source:[
                        ['Jan',34,20,'XX',52],
                        ['Feb',28,14,'YY',54],
                        ['Mar',45,32,'ZZ',42],
                        ['Apr',69,46],
                        ['May',39,24],
                        ['Jun',44,55],
                        ['July',33,77],
                        ['Aug',22,66],
                        ['Sep',11,99],
                        ['Oct',23,45],
                        ['Nov',56,25],
                        ['Dec',89,12],
                    ]
                },
                series:[{
                    type:'pie',
                    center:['65%',60],
                    radius:35,
                    encode:{
                        itemname:3, //取dataset第4列数据
                        value: 4//取dataset第5列数据
                    }
                },{
                    type:'line',
                    encode:{
                        x:0,y:1 //取dataset第1，2列数据
                    }
                },{
                    type:'bar',
                    encode:{  //取dataset第1，3列数据
                        x:0,
                        y:2
                    }
                }],
            };
            myChart1.setOption(option1);

            // let myChart2 = echarts.init(document.getElementById('main2')) 
            // let option2 = {
            //     title:{
            //         text: 'Top500',
            //         subtext:'数据来自网路'
            //     },
            //     tooltip:{
            //         trigger: 'axis',
            //         axisPointer:{
            //             type:'shadow'
            //         }
            //     },
            //     legend:{
            //         data:['2011','2012']
            //     },
            //     grid:{

            //     },
            //     xAxis:{
            //         type: 'value',
            //         boundaryGap:[0,0.01]
            //     },
            //     yAxis:{
            //         type:'category',
            //         data:['巴西','印尼','美国','印度','中国','世界人口(万)']
            //     },
            //     series:[
            //         {
            //             name: '2011年',
            //             type: 'bar',
            //             data: [18203, 23489, 29034, 104970, 131744, 630230]
            //         },
            //         {
            //             name: '2012年',
            //             type: 'bar',
            //             data: [19325, 23438, 31000, 121594, 134141, 681807]
            //         }
            //     ],
            // };
            // myChart2.setOption(option2);
            let myChart2 = echarts.init(document.getElementById('main2')) 
            let option2 = {
                title:{
                    text: 'Top500',
                    subtext:'数据来自网路'
                },
                // color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

                tooltip:{
                    trigger: 'axis',
                    axisPointer:{
                        type:'shadow'
                    }
                },
                legend:{
                    data:['2011年']
                },
                grid:{

                },
                xAxis:{
                    type: 'value',
                    boundaryGap:[0,0.01]
                },
                yAxis:{
                    type:'category',
                    data:['巴西','印尼','美国','印度','中国','世界人口(万)']
                },
                series:[
                    {
                        name: '2011年',
                        type: 'bar',
                        data: [18203, 23489, 29034, 104970, 131744, 630230],
                        // color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                    },
                ],
            };
            myChart2.setOption(option2);



            this.myChart3 = echarts.init(document.getElementById('main3')) 
            this.option3 = {
                title:{
                    text: '仪表盘',
                },

                tooltip:{
                    formater: '{a}<br/>{b}: {c}%'
                },
                toolbox: {
                    feature:{
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series:[
                    {
                        name: '业务指标',
                        type: 'gauge',
                        detail: {formatter:'{value}%'},
                        data: [{
                            value: 50,
                            name: '完成率'
                        }],
                    },
                ],
            };
            this.myChart3.setOption(this.option3);

        },
        refresh_gauge(){
            this.option3.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0
            // this.gauge = (Math.random()*100).toFixed(2) - 0
            // console.log(this.gauge)
            this.myChart3.setOption(this.option3,true)
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
        this.timer = setInterval(this.refresh_gauge, 2000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
}
</script>
<style scoped>
</style>